<template>
	<view class="container">
		<!-- 医生基本信息卡片 -->
		<view class="doctor-card">
			<view class="doctor-header">
				<image class="doctor-avatar" :src="doctor.avatar"></image>
				<view class="doctor-info">
					<view class="doctor-name-title">
						<text class="doctor-name">{{doctor.name}}</text>
						<text class="doctor-title">{{doctor.title}}</text>
					</view>
					<view class="doctor-department">{{doctor.department}}</view>
					<view class="doctor-stats">
						<view class="stat-item">
							<text class="stat-value">{{doctor.yearsOfExperience}}年</text>
							<text class="stat-label">从医经验</text>
						</view>
						<view class="stat-item">
							<text class="stat-value">{{doctor.consultationCount}}+</text>
							<text class="stat-label">问诊量</text>
						</view>
						<view class="stat-item">
							<text class="stat-value">{{doctor.rating}}</text>
							<text class="stat-label">满意度</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 医生专长和介绍 -->
		<view class="doctor-detail-card">
			<view class="section-header">
				<text class="section-title">擅长领域</text>
			</view>
			<view class="specialty-tags">
				<view v-for="(specialty, index) in doctor.specialtyTags" :key="index" class="specialty-tag">
					{{specialty}}
				</view>
			</view>
			<view class="specialty-detail">{{doctor.specialty}}</view>

			<view class="section-header">
				<text class="section-title">医生简介</text>
			</view>
			<view class="doctor-bio">{{doctor.bio}}</view>
		</view>

		<!-- 预约信息 -->
		<view class="appointment-card">
			<view class="section-header">
				<text class="section-title">选择就诊时间</text>
			</view>

			<!-- 日期选择 -->
			<view class="date-selector">
				<scroll-view scroll-x="true" class="date-scroll">
					<view v-for="(date, index) in availableDates" :key="index" class="date-item"
						:class="{ active: selectedDateIndex === index }" @click="selectDate(index)">
						<text class="date-day">{{date.day}}</text>
						<text class="date-date">{{date.date}}</text>
						<text class="date-availability">{{date.availability}}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 时间段选择 -->
			<view class="time-selector">
				<view class="time-period">
					<text class="period-title">上午</text>
					<view class="time-slots">
						<view v-for="(slot, index) in morningSlots" :key="'m'+index" class="time-slot"
							:class="{ active: selectedTimeSlot === slot.id, disabled: !slot.available }"
							@click="selectTimeSlot(slot)">
							{{slot.time}}
						</view>
					</view>
				</view>

				<view class="time-period">
					<text class="period-title">下午</text>
					<view class="time-slots">
						<view v-for="(slot, index) in afternoonSlots" :key="'a'+index" class="time-slot"
							:class="{ active: selectedTimeSlot === slot.id, disabled: !slot.available }"
							@click="selectTimeSlot(slot)">
							{{slot.time}}
						</view>
					</view>
				</view>
			</view>

			<!-- 选择科室 -->
			<view class="clinic-selector">
				<view class="section-header">
					<text class="section-title">选择门诊类型</text>
				</view>
				<view class="clinic-types">
					<view v-for="(clinic, index) in clinicTypes" :key="index" class="clinic-type"
						:class="{ active: selectedClinicType === clinic.id }" @click="selectClinic(clinic)">
						<view class="clinic-info">
							<text class="clinic-name">{{clinic.name}}</text>
							<text class="clinic-description">{{clinic.description}}</text>
						</view>
						<text class="clinic-fee">￥{{clinic.fee}}</text>
					</view>
				</view>
			</view>

			<!-- 预约须知 -->
			<view class="notice-section">
				<view class="section-header">
					<text class="section-title">预约须知</text>
				</view>
				<view class="notice-content">
					<view class="notice-item">
						<text class="notice-icon">•</text>
						<text class="notice-text">预约成功后，请提前30分钟到医院</text>
					</view>
					<view class="notice-item">
						<text class="notice-icon">•</text>
						<text class="notice-text">初诊患者请携带身份证、医保卡等有效证件</text>
					</view>
					<view class="notice-item">
						<text class="notice-icon">•</text>
						<text class="notice-text">如需取消预约，请提前24小时操作</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="price-info">
				<text class="price-label">门诊费:</text>
				<text class="price-value">￥{{selectedClinicFee}}</text>
			</view>
			<view class="action-buttons">
				<view class="action-button consultation" @click="startConsultation">在线问诊</view>
				<view class="action-button appointment" @click="makeAppointment">立即预约</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doctors: {
					// 内科医生
					0: [{
							id: '101',
							name: '张伟',
							title: '主任医师',
							department: '内科 - 心血管',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 15,
							consultationCount: 3256,
							rating: '4.9',
							specialty: '冠心病、高血压、心力衰竭、心律失常等心血管疾病的诊断及治疗，尤其擅长复杂心血管疾病的个体化治疗方案制定。',
							specialtyTags: ['冠心病', '高血压', '心力衰竭', '心律失常', '心脏介入手术'],
							bio: '张伟医生毕业于北京协和医学院，曾在美国梅奥诊所进修3年。现任心内科主任医师，教授，博士生导师。在国内外心血管领域期刊发表论文50余篇，主持国家级科研项目3项。张医生以精准诊断、耐心细致著称，深受患者信赖。'
						},
						{
							id: '102',
							name: '李明',
							title: '副主任医师',
							department: '内科 - 呼吸',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 12,
							consultationCount: 2845,
							rating: '4.8',
							specialty: '哮喘、慢阻肺、肺部感染、肺炎等呼吸系统疾病的诊断及治疗，尤其擅长慢性呼吸系统疾病的长期管理。',
							specialtyTags: ['哮喘', '慢阻肺', '肺部感染', '肺炎', '呼吸功能检查'],
							bio: '李明医生毕业于上海交通大学医学院，曾在加拿大多伦多大学附属医院进修2年。现任呼吸内科副主任医师，副教授。在国内外呼吸医学领域期刊发表论文30余篇，参与国家级科研项目2项。李医生临床经验丰富，诊疗方案规范。'
						},
						{
							id: '103',
							name: '王芳',
							title: '主治医师',
							department: '内科 - 消化',
							avatar: '/static/doctors/women.png',
							yearsOfExperience: 8,
							consultationCount: 1967,
							rating: '4.7',
							specialty: '胃炎、肠炎、胃溃疡、胃食管反流病等消化系统疾病的诊断及治疗，尤其擅长功能性消化不良的综合治疗。',
							specialtyTags: ['胃炎', '肠炎', '胃溃疡', '胃食管反流病', '消化内镜'],
							bio: '王芳医生毕业于浙江大学医学院，现任消化内科主治医师。在国内消化医学领域期刊发表论文15篇，参与省级科研项目2项。王医生对患者态度和蔼，善于沟通，注重患者消化系统健康的长期管理和生活方式指导。'
						}
					],
					// 外科医生
					1: [{
							id: '201',
							name: '刘强',
							title: '主任医师',
							department: '外科 - 普外',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 18,
							consultationCount: 3578,
							rating: '4.9',
							specialty: '肝胆外科、胰腺外科、微创手术等普外科疾病的诊断及治疗，尤其擅长复杂肝胆胰疾病的微创手术治疗。',
							specialtyTags: ['肝胆外科', '胰腺外科', '微创手术', '腹腔镜手术', '肝脏移植'],
							bio: '刘强医生毕业于四川大学华西医学院，曾在德国汉堡大学医学中心进修4年。现任普外科主任医师，教授，博士生导师。在国内外外科领域期刊发表论文60余篇，主持国家级科研项目4项。刘医生手术技术精湛，是国内肝胆外科领域的知名专家。'
						},
						{
							id: '202',
							name: '陈勇',
							title: '副主任医师',
							department: '外科 - 胸外',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 14,
							consultationCount: 2657,
							rating: '4.8',
							specialty: '肺癌、食管癌、纵隔肿瘤等胸外科疾病的诊断及治疗，尤其擅长胸腔镜微创手术和肺癌早期筛查。',
							specialtyTags: ['肺癌', '食管癌', '纵隔肿瘤', '胸腔镜手术', '肺结节诊治'],
							bio: '陈勇医生毕业于中山大学医学院，曾在日本国立癌症中心进修3年。现任胸外科副主任医师，副教授。在国内外胸外科领域期刊发表论文25篇，参与国家级科研项目2项。陈医生以手术精准、并发症少著称。'
						},
						{
							id: '203',
							name: '赵杰',
							title: '主治医师',
							department: '外科 - 神经外科',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 9,
							consultationCount: 1876,
							rating: '4.7',
							specialty: '脑血管疾病、脑肿瘤、脊柱疾病等神经外科疾病的诊断及治疗，尤其擅长颅内微创手术和神经内镜技术。',
							specialtyTags: ['脑血管疾病', '脑肿瘤', '脊柱疾病', '神经内镜', '立体定向手术'],
							bio: '赵杰医生毕业于首都医科大学，曾在澳大利亚墨尔本大学附属医院进修1年。现任神经外科主治医师。在国内神经外科领域期刊发表论文12篇，参与省级科研项目3项。赵医生手术技术扎实，对复杂神经系统疾病有独到见解。'
						}
					],
					// 儿科医生
					2: [{
							id: '301',
							name: '周丽',
							title: '主任医师',
							department: '儿科 - 新生儿',
							avatar: '/static/doctors/women.png',
							yearsOfExperience: 16,
							consultationCount: 3128,
							rating: '4.9',
							specialty: '早产儿、新生儿疾病、儿童发育等新生儿科疾病的诊断及治疗，尤其擅长危重新生儿救治和早产儿管理。',
							specialtyTags: ['早产儿', '新生儿疾病', '儿童发育', '新生儿窒息', '新生儿黄疸'],
							bio: '周丽医生毕业于复旦大学医学院，曾在美国波士顿儿童医院进修3年。现任新生儿科主任医师，教授。在国内外儿科领域期刊发表论文40余篇，主持国家级科研项目3项。周医生临床经验丰富，救治过大量危重新生儿，在业内享有盛誉。'
						},
						{
							id: '302',
							name: '吴小红',
							title: '副主任医师',
							department: '儿科 - 儿童哮喘',
							avatar: '/static/doctors/women.png',
							yearsOfExperience: 13,
							consultationCount: 2456,
							rating: '4.8',
							specialty: '小儿哮喘、过敏性疾病、肺炎等儿科呼吸系统疾病的诊断及治疗，尤其擅长儿童过敏性疾病的长期管理和预防。',
							specialtyTags: ['小儿哮喘', '过敏性疾病', '肺炎', '过敏原检测', '呼吸功能评估'],
							bio: '吴小红医生毕业于华中科技大学同济医学院，曾在英国伦敦大学学院附属医院进修2年。现任儿科副主任医师，副教授。在国内外儿科呼吸领域期刊发表论文20余篇，参与国家级科研项目1项。吴医生对儿童心理了解深入，善于与小患者沟通。'
						}
					],
					// 妇产科医生
					3: [{
							id: '401',
							name: '杨华',
							title: '主任医师',
							department: '妇产科 - 产科',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 17,
							consultationCount: 3342,
							rating: '4.9',
							specialty: '高危妊娠、产科并发症、产前诊断等产科疾病的诊断及治疗，尤其擅长高危孕产妇的管理和应对各类产科急危重症。',
							specialtyTags: ['高危妊娠', '产科并发症', '产前诊断', '剖宫产手术', '自然分娩'],
							bio: '杨华医生毕业于北京大学医学部，曾在法国巴黎第五大学附属医院进修3年。现任产科主任医师，教授，博士生导师。在国内外产科领域期刊发表论文45篇，主持国家级科研项目3项。杨医生临床经验丰富，成功处理过众多高危妊娠案例。'
						},
						{
							id: '402',
							name: '孙燕',
							title: '副主任医师',
							department: '妇产科 - 妇科',
							avatar: '/static/doctors/women.png',
							yearsOfExperience: 14,
							consultationCount: 2789,
							rating: '4.8',
							specialty: '宫颈疾病、卵巢囊肿、子宫内膜异位症等妇科疾病的诊断及治疗，尤其擅长妇科肿瘤的早期筛查和微创手术治疗。',
							specialtyTags: ['宫颈疾病', '卵巢囊肿', '子宫内膜异位症', '妇科微创手术', '妇科内分泌'],
							bio: '孙燕医生毕业于中南大学湘雅医学院，曾在韩国首尔大学附属医院进修2年。现任妇科副主任医师，副教授。在国内外妇科领域期刊发表论文25篇，参与国家级科研项目2项。孙医生手术技术精湛，特别是在妇科微创手术方面造诣颇深。'
						},
						{
							id: '403',
							name: '林玲',
							title: '主治医师',
							department: '妇产科 - 生殖',
							avatar: '/static/doctors/women.png',
							yearsOfExperience: 10,
							consultationCount: 2056,
							rating: '4.7',
							specialty: '不孕不育、辅助生殖技术、优生优育等生殖医学问题的诊断及治疗，尤其擅长辅助生殖技术的个体化应用和心理疏导。',
							specialtyTags: ['不孕不育', '辅助生殖技术', '优生优育', '试管婴儿', '生殖内分泌'],
							bio: '林玲医生毕业于南京医科大学，曾在比利时布鲁塞尔自由大学附属医院进修1年。现任生殖医学科主治医师。在国内生殖医学领域期刊发表论文15篇，参与省级科研项目2项。林医生专注于不孕症的诊治，始终将患者需求放在首位。'
						}
					],
					// 肿瘤科医生
					4: [{
							id: '501',
							name: '郑阳',
							title: '主任医师',
							department: '肿瘤科 - 放疗',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 16,
							consultationCount: 3078,
							rating: '4.8',
							specialty: '肺癌放疗、头颈部肿瘤、放射治疗等肿瘤放疗技术的应用，尤其擅长精准放疗和放疗与其他治疗手段的联合应用。',
							specialtyTags: ['肺癌放疗', '头颈部肿瘤', '放射治疗', '精准放疗', '放化疗结合'],
							bio: '郑阳医生毕业于中国医科大学，曾在美国MD安德森癌症中心进修4年。现任肿瘤放疗科主任医师，教授，博士生导师。在国内外肿瘤放疗领域期刊发表论文55篇，主持国家级科研项目4项。郑医生是国内精准放疗领域的权威专家。'
						},
						{
							id: '502',
							name: '黄建国',
							title: '副主任医师',
							department: '肿瘤科 - 化疗',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 14,
							consultationCount: 2678,
							rating: '4.8',
							specialty: '乳腺癌、胃癌、结直肠癌化疗等肿瘤化疗方案的制定与实施，尤其擅长个体化化疗方案设计和副作用管理。',
							specialtyTags: ['乳腺癌', '胃癌', '结直肠癌化疗', '靶向治疗', '免疫治疗'],
							bio: '黄建国医生毕业于天津医科大学，曾在新加坡国立大学癌症中心进修2年。现任肿瘤化疗科副主任医师，副教授。在国内外肿瘤化疗领域期刊发表论文30篇，参与国家级科研项目2项。黄医生擅长制定个体化治疗方案，平衡治疗效果与生活质量。'
						}
					],
					// 骨科医生
					5: [{
							id: '601',
							name: '朱伟东',
							title: '主任医师',
							department: '骨科 - 脊柱',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 17,
							consultationCount: 3156,
							rating: '4.9',
							specialty: '颈椎病、腰椎间盘突出、脊柱侧弯等脊柱疾病的诊断及治疗，尤其擅长复杂脊柱畸形矫正和微创脊柱手术。',
							specialtyTags: ['颈椎病', '腰椎间盘突出', '脊柱侧弯', '脊柱微创手术', '脊柱畸形矫正'],
							bio: '朱伟东医生毕业于上海交通大学医学院，曾在美国梅奥诊所脊柱中心进修3年。现任脊柱外科主任医师，教授，博士生导师。在国内外脊柱外科领域期刊发表论文50余篇，主持国家级科研项目3项。朱医生手术技术精湛，是国内脊柱外科领域的知名专家。'
						},
						{
							id: '602',
							name: '唐明',
							title: '副主任医师',
							department: '骨科 - 关节',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 13,
							consultationCount: 2567,
							rating: '4.8',
							specialty: '关节置换、运动损伤、关节炎等关节疾病的诊断及治疗，尤其擅长髋膝关节置换手术和运动医学损伤修复。',
							specialtyTags: ['关节置换', '运动损伤', '关节炎', '关节镜手术', '人工关节翻修'],
							bio: '唐明医生毕业于北京协和医学院，曾在德国柏林夏里特医学院进修2年。现任关节外科副主任医师，副教授。在国内外关节外科领域期刊发表论文25篇，参与国家级科研项目2项。唐医生技术全面，尤其在微创关节手术方面有独到造诣。'
						},
						{
							id: '603',
							name: '彭辉',
							title: '主治医师',
							department: '骨科 - 手足',
							avatar: '/static/doctors/man.jpg',
							yearsOfExperience: 9,
							consultationCount: 1897,
							rating: '4.7',
							specialty: '手足外伤、手足畸形矫正、骨折等手足外科疾病的诊断及治疗，尤其擅长手部显微外科手术和手足功能重建。',
							specialtyTags: ['手足外伤', '手足畸形矫正', '骨折', '显微外科手术', '断指再植'],
							bio: '彭辉医生毕业于华西医科大学，曾在瑞士苏黎世大学附属医院进修1年。现任手足外科主治医师。在国内手足外科领域期刊发表论文10篇，参与省级科研项目2项。彭医生手术技术精细，特别重视手术后的功能恢复和康复训练。'
						}
					]
				},
				availableDates: [{
						day: '今天',
						date: '3月21日',
						availability: '可约'
					},
					{
						day: '明天',
						date: '3月22日',
						availability: '可约'
					},
					{
						day: '周日',
						date: '3月23日',
						availability: '可约'
					},
					{
						day: '周一',
						date: '3月24日',
						availability: '可约'
					},
					{
						day: '周二',
						date: '3月25日',
						availability: '可约'
					},
					{
						day: '周三',
						date: '3月26日',
						availability: '可约'
					},
					{
						day: '周四',
						date: '3月27日',
						availability: '可约'
					}
				],
				selectedDateIndex: 0,
				morningSlots: [{
						id: 'm1',
						time: '08:00',
						available: true
					},
					{
						id: 'm2',
						time: '08:30',
						available: true
					},
					{
						id: 'm3',
						time: '09:00',
						available: false
					},
					{
						id: 'm4',
						time: '09:30',
						available: true
					},
					{
						id: 'm5',
						time: '10:00',
						available: true
					},
					{
						id: 'm6',
						time: '10:30',
						available: false
					},
					{
						id: 'm7',
						time: '11:00',
						available: true
					}
				],
				afternoonSlots: [{
						id: 'a1',
						time: '13:30',
						available: true
					},
					{
						id: 'a2',
						time: '14:00',
						available: false
					},
					{
						id: 'a3',
						time: '14:30',
						available: true
					},
					{
						id: 'a4',
						time: '15:00',
						available: true
					},
					{
						id: 'a5',
						time: '15:30',
						available: false
					},
					{
						id: 'a6',
						time: '16:00',
						available: true
					},
					{
						id: 'a7',
						time: '16:30',
						available: true
					}
				],
				selectedTimeSlot: null,
				clinicTypes: [{
						id: 1,
						name: '普通门诊',
						description: '常规就诊，适合一般病症',
						fee: 60
					},
					{
						id: 2,
						name: '专家门诊',
						description: '专家亲诊，复杂疾病优先',
						fee: 150
					},
					{
						id: 3,
						name: '特需门诊',
						description: '私密诊疗，专属诊室服务',
						fee: 300
					}
				],
				selectedClinicType: 1,
				selectedClinicFee: 60,
				yuyueId: 0
			}
		},
		onLoad(option) {
			// this.doctor.name = option.name
			this.yuyueId = option.id
			this.availableDates = this.generateAvailableDates();
			console.log(option.id, option.name);
			for (const department in this.doctors) {
				const doctor = this.doctors[department].find(doc => doc.id === option.id);
				if (doctor) {
					this.doctor = doctor;
					break;
				}
			}
			// this.getDoctors()
			this.globaApi = getApp().globalData.baseUrl
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			generateAvailableDates() {
				const dates = [];
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

				for (let i = 0; i < 7; i++) {
					const currentDate = new Date();
					currentDate.setDate(currentDate.getDate() + i);

					const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
					const day = currentDate.getDate();

					dates.push({
						day: i === 0 ? '今天' : i === 1 ? '明天' : weekdays[currentDate.getDay()],
						date: `${month}月${day}日`, // 直接显示月和日
						availability: '可约'
					});
				}

				return dates;
			},
			selectDate(index) {
				this.selectedDateIndex = index;
				// 这里可以根据选择的日期更新可用时间段
				console.log(`选择了日期：${this.availableDates[index].date}`);
			},
			selectTimeSlot(slot) {
				if (!slot.available) return;
				this.selectedTimeSlot = slot.id;
				console.log(`选择了时间段：${slot.time}`);
			},
			selectClinic(clinic) {
				this.selectedClinicType = clinic.id;
				this.selectedClinicFee = clinic.fee;
				console.log(`选择了门诊类型：${clinic.name}，费用：${clinic.fee}`);
			},
			startConsultation() {
				uni.navigateTo({
					url: `/pages/consultation/chat?doctorId=${this.doctor.id}`
				});
			},
			makeAppointment() {
				if (!this.selectedTimeSlot) {
					uni.showToast({
						title: '请选择就诊时间',
						icon: 'none'
					});
					return;
				}

				// 确认预约信息
				uni.showLoading({
					title: '预约中...'
				});
				const formData = {
					doctorId: this.yuyueId,
					reservation: '2025年' + this.availableDates[this.selectedDateIndex].date,
					cost: this.selectedClinicFee
				}
				console.log(formData);
				uni.request({
					url: `${this.globaApi}/reservation/makeAnAppointment`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					data: formData,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '预约成功',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.data.message || '预约失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				})
			},
			getSelectedTimeText() {
				const allSlots = [...this.morningSlots, ...this.afternoonSlots];
				const selected = allSlots.find(slot => slot.id === this.selectedTimeSlot);
				return selected ? selected.time : '';
			},
			getSelectedClinicName() {
				const selected = this.clinicTypes.find(clinic => clinic.id === this.selectedClinicType);
				return selected ? selected.name : '';
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 140rpx;
		/* 为底部操作栏预留空间 */
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 90rpx;
		background-color: #fff;
		padding: 0 30rpx;
		position: relative;
	}

	.back-button {
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 36rpx;
		margin-right: 10rpx;
	}

	.back-text {
		font-size: 28rpx;
	}

	.page-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32rpx;
		font-weight: bold;
	}

	.doctor-card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.doctor-header {
		display: flex;
	}

	.doctor-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
		margin-right: 30rpx;
	}

	.doctor-info {
		flex: 1;
	}

	.doctor-name-title {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.doctor-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.doctor-title {
		font-size: 28rpx;
		color: #3399ff;
		background-color: rgba(51, 153, 255, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 6rpx;
	}

	.doctor-department {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.doctor-stats {
		display: flex;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}

	.stat-value {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.doctor-detail-card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.section-header {
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
		padding-left: 20rpx;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 28rpx;
		background-color: #3399ff;
		border-radius: 4rpx;
	}

	.specialty-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.specialty-tag {
		background-color: #f0f8ff;
		color: #3399ff;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.specialty-detail {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}

	.doctor-bio {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	.appointment-card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.date-selector {
		margin-bottom: 30rpx;
	}

	.date-scroll {
		white-space: nowrap;
	}

	.date-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
	}

	.date-item.active {
		background-color: #3399ff;
	}

	.date-day {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.date-date {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.date-availability {
		font-size: 22rpx;
		color: #3399ff;
	}

	.date-item.active .date-day,
	.date-item.active .date-date,
	.date-item.active .date-availability {
		color: #fff;
	}

	.time-selector {
		margin-bottom: 30rpx;
	}

	.time-period {
		margin-bottom: 20rpx;
	}

	.period-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.time-slots {
		display: flex;
		flex-wrap: wrap;
	}

	.time-slot {
		width: 140rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.time-slot.active {
		background-color: #3399ff;
		color: #fff;
	}

	.time-slot.disabled {
		background-color: #f0f0f0;
		color: #ccc;
		position: relative;
	}

	.time-slot.disabled::after {
		content: '已约满';
		position: absolute;
		font-size: 20rpx;
		color: #999;
		bottom: 10rpx;
	}

	.clinic-selector {
		margin-bottom: 30rpx;
	}

	.clinic-types {
		display: flex;
		flex-direction: column;
	}

	.clinic-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx;
		margin-bottom: 20rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
	}

	.clinic-type.active {
		border-color: #3399ff;
		background-color: rgba(51, 153, 255, 0.05);
	}

	.clinic-info {
		display: flex;
		flex-direction: column;
	}

	.clinic-name {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.clinic-description {
		font-size: 24rpx;
		color: #999;
	}

	.clinic-fee {
		font-size: 32rpx;
		color: #ff5500;
		font-weight: bold;
	}

	.notice-section {
		margin-bottom: 20rpx;
	}

	.notice-content {
		background-color: #fffaf0;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.notice-item {
		display: flex;
		margin-bottom: 10rpx;
	}

	.notice-item:last-child {
		margin-bottom: 0;
	}

	.notice-icon {
		margin-right: 10rpx;
		color: #ff9500;
	}

	.notice-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.price-info {
		display: flex;
		align-items: baseline;
	}

	.price-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.price-value {
		font-size: 36rpx;
		color: #ff5500;
		font-weight: bold;
	}

	.action-buttons {
		display: flex;
	}

	.action-button {
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.action-button.consultation {
		background-color: #f0f8ff;
		color: #3399ff;
	}

	.action-button.appointment {
		background-color: #3399ff;
		color: #fff;
	}
</style>